<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>comment-18001010319-方弘轩</title>
    <link rel="stylesheet" href="./comment/iconfont.css">
    <link rel="stylesheet" href="./myicon/iconfont.css">
    <link rel="stylesheet" href="./swiper-bundle.min.css">
    <link rel="stylesheet" href="./color-icon.css">
    <style>
        body{
            min-width: 320px;
        }
        body,div,ul,h2,p{
            margin: 0;
            padding: 0;
        }
        img{
            border: 0;
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        li {
            list-style: none;
        }
        #top{
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #fff;
            height: 40px;
            text-indent: 10px;
            display: flex;
            align-items: center;
            border-bottom:1px solid #ccc ;
        }
        #top a{
            color: rgb(128, 126, 126);
            font-size: 30px;
            line-height: 40px;
            flex-grow: 1;
        }
        #top h2{
            flex-wrap: wrap;
            font-size: 18px;
            flex-grow: 15;
            color: cadetblue;
        }
        #top span {
            margin: 0;
            padding: 0;
            font-size: 20px;
            flex-grow: 1;
            color: rgb(94, 93, 93);
        }
        .kong{
            height: 40px;
        }

        #footer{
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 40px;
            background-color: #fff;
            display: flex;
            align-items: center; 
            text-indent: 10px;
        } 
        #footer span{
            font-size: 20px;
            color: cadetblue;
            flex-grow: 1;
        }
        #footer input {
            height: 35px;
            border: none;
            color: cadetblue;
            flex-grow: 15;
            text-indent: 5px;
        }
        #footer p {
            margin: 0;
            padding: 0;
            font-size: 15px;
            font-weight: bold;
            color: blueviolet;
            margin-right: 5px;
            flex-grow: 1;
        }
        #box {
            background-color: rgb(218, 218, 218);
            height: 2000px;
            font-size: 14px;
            color: rgb(104, 104, 104);
            padding-top: 5px;
            font-weight: bold;
        }
        .wond{
            width: 100%;
            height: 505px;
            background-color: #fff;
            margin-top: 5px;
        }
        #box p {
            text-indent: 5px;
            margin-bottom: 5px;
        }
        .plq {
            height: 100px;
            display: flex;
            align-items: center; 
            border-bottom:1px solid #ccc ;
            background-color: #fff;
        }
        .plq img {
            line-height: 100px;
            width: 30px; 
            display: inline-block;   
            margin-right: 8px;
            margin-left: 5px;
        }
        .plq ul {
            display: inline-block;

        }
        .plq ul li:nth-child(1){
            width: 80%;
            font-size: 13px;
            font-weight: bold;
            color: black;
        }
        .plq ul li:nth-child(2){
            width: 80%;
            font-size: 12px;
            color: rgb(80, 79, 79);
        }
        .plq ul li:nth-child(3){
            width: 80%;
            font-size: 10px;
            color: cadetblue;
        }
        .plq span {
            float: right;
            width: 50px;
            line-height: 47px;
            color: rgb(159, 156, 161);
        }
        .gd {
            position: relative;
            top: -32px;
            right: 0px;
        }
        .icon-zan{
            position: relative;
            top: 20px;
            right: -50px;
        }
        .icon-pinglun {
            position: relative;
            top:20px;
            right: -45px;
        }
        .number{
            position: relative;
            top: 21px;
            right: -60px;
        }
        .allp ul{
            display: inline-block;         
        }
        .allp {
            height: 100px;
            display: flex;
            align-items: center; 
            border-bottom:1px solid #ccc ;
            background-color: #fff;
        }
        .allp img {
            line-height: 100px;
            width: 30px; 
            display: inline-block;   
            margin-right: 8px;
            margin-left: 5px;
        }

        .allp ul li:nth-child(1){
            width: 80%;
            font-size: 13px;
            font-weight: bold;
            color: black;
        }
        .allp ul li:nth-child(2){
            width: 80%;
            font-size: 12px;
            color: rgb(80, 79, 79);
        }
        .allp ul li:nth-child(3){
            width: 80%;
            font-size: 10px;
            color: cadetblue;
        }
        .allp span {
            float: right;
            width: 50px;
            line-height: 47px;
            color: rgb(159, 156, 161);

        }
    </style>
</head>
<body>
    <div id="top">
        <a href="./main-body.html">×</a>
        <h2>全部 502 条评论</h2>
        <span class="iconfont icon-xialaliebiao"></span>
    </div>

<div class="kong"></div>

    <div id="box">
        <p>精彩评论（5）</p>
        <ul class="wond"> 
            <li class="plq">
                <img src="images/tx2.jpg" >
                <ul>
                    <li>哈哈哈后</li>
                    <li>厉害啊阿金萨上级领导埃里克决定了</li>
                    <li>10-28 · 查看回复</li>
                </ul>
                <span class="number">36</span>
                <span class="iconfont icon-zan"></span>
                <span class="iconfont icon-pinglun"></span>
                <span class="iconfont icon-diandiandian gd"></span>
            </li>
        </ul>

        <hr>

        <p>评论（502）</p>
        <ul class="all">
            <li class="allp">
                <img src="images/tx2.jpg" >
                    <ul>
                        <li>哈哈哈后</li>
                        <li>厉害啊阿金萨上级领去导埃里克决定了</li>
                        <li>10-28</li>
                    </ul>
                    <span class="number">36</span>
                    <span class="iconfont icon-zan"></span>
                    <span class="iconfont icon-pinglun"></span>
                    <span class="iconfont icon-diandiandian gd"></span>    
            </li>
            
        </ul>
    </div>

    <div id="footer">
        <span class="iconfont icon-biaoqing"></span>
        <input type="text" value="请输入评论">
        <p>发布</p>
    </div>
    <script>
        var data=[{
            img:"./images/tx3.jpg",
            name:"hhhh",
            text:"厉害啊阿金萨上级领导埃里克决定了",
            time:"10-28",
            number:"36"
        }  ,
        {
            img:"./images/tx3.jpg",
            name:"hhhh",
            text:"厉害啊阿金萨上级领导埃里克决定了",
            time:"10-28",
            number:"36"
        } 
        ,
        {
            img:"./images/tx5.jpg",
            name:"hhhh",
            text:"厉害啊阿金萨上级领导埃里克决定了",
            time:"10-28",
            number:"36"
        } 
        ,
        {
            img:"./images/tx1.jpg",
            name:"hhhh",
            text:"厉害啊阿金萨上级领导埃里克决定了",
            time:"10-28",
            number:"36"
        } ]
        var wond=document.querySelector(".wond");
        console.log(wond);
        data.forEach((v,i)=>{
            let li=document.createElement("li");
            li.innerHTML=` 
                <img src="${v.img}" >
                <ul>
                    <li>${v.name}</li>
                    <li>${v.text}</li>
                    <li>${v.time} · 查看回复</li>
                </ul>
                <span class="number">${v.number}</span>
                <span class="iconfont icon-zan"></span>
                <span class="iconfont icon-pinglun"></span>
                <span class="iconfont icon-diandiandian gd"></span>
                `;
                li.className="plq";
            wond.appendChild(li);
        })

        var data=[
            {
            img:"./images/tx3.jpg",
            name:"hhhh",
            text:"厉害啊阿金萨上级领导埃里克决定了",
            time:"10-28",
            number:"36"
            },
            {
            img:"./images/tx3.jpg",
            name:"hhhh",
            text:"厉害啊阿金萨上级领导埃里克决定了",
            time:"10-28",
            number:"36"
            }
            ,
            {
            img:"./images/tx3.jpg",
            name:"hhhh",
            text:"厉害啊阿金萨上级领导埃里克决定了",
            time:"10-28",
            number:"36"
            }
            ,
            {
            img:"./images/tx3.jpg",
            name:"hhhh",
            text:"厉害啊阿金萨上级领导埃里克决定了",
            time:"10-28",
            number:"36"
            }
            ,
            {
            img:"./images/tx3.jpg",
            name:"hhhh",
            text:"厉害啊阿金萨上级领导埃里克决定了",
            time:"10-28",
            number:"36"
            }
            ,
            {
            img:"./images/tx3.jpg",
            name:"hhhh",
            text:"厉害啊阿金萨上级领导埃里克决定了",
            time:"10-28",
            number:"36"
            }
            ,
            {
            img:"./images/tx3.jpg",
            name:"hhhh",
            text:"厉害啊阿金萨上级领导埃里克决定了",
            time:"10-28",
            number:"36"
            }
            ,
            {
            img:"./images/tx3.jpg",
            name:"hhhh",
            text:"厉害啊阿金萨上级领导埃里克决定了",
            time:"10-28",
            number:"36"
            }
            ,
            {
            img:"./images/tx3.jpg",
            name:"hhhh",
            text:"厉害啊阿金萨上级领导埃里克决定了",
            time:"10-28",
            number:"36"
            }
            ,
            {
            img:"./images/tx3.jpg",
            name:"hhhh",
            text:"厉害啊阿金萨上级领导埃里克决定了",
            time:"10-28",
            number:"36"
            }
            ,
            {
            img:"./images/tx3.jpg",
            name:"hhhh",
            text:"厉害啊阿金萨上级领导埃里克决定了",
            time:"10-28",
            number:"36"
            }
            ,
            {
            img:"./images/tx3.jpg",
            name:"hhhh",
            text:"厉害啊阿金萨上级领导埃里克决定了",
            time:"10-28",
            number:"36"
            }
            ,
            {
            img:"./images/tx3.jpg",
            name:"hhhh",
            text:"厉害啊阿金萨上级领导埃里克决定了",
            time:"10-28",
            number:"36"
            }
        ]
        var all=document.querySelector(".all");
        console.log(all);
        data.forEach((v,i)=>{
            let li=document.createElement("li");
            li.innerHTML=` 
                <img src="${v.img}" >
                <ul>
                    <li>${v.name}</li>
                    <li>${v.text}</li>
                    <li>${v.time} · 查看回复</li>
                </ul>
                <span class="number">${v.number}</span>
                <span class="iconfont icon-zan"></span>
                <span class="iconfont icon-pinglun"></span>
                <span class="iconfont icon-diandiandian gd"></span>
                `;
                li.className="allp";
            all.appendChild(li);
        })



    </script>
</body>
</html>